<template>
  <BasicModal
    :title="title"
    :width="380"
    :canFullscreen="false" :centered="true"
    v-bind="$attrs"
    @ok="handleOk"
    @register="registerModal"
  >
    <BasicForm @register="registerForm" />
  </BasicModal>
</template>


<script lang="ts" setup>
import { watch, computed, inject, ref, unref, onMounted } from "vue";

import { BasicForm, useForm } from "/@/components/Form/index";
import { BasicModal, useModalInner } from "/@/components/Modal";

import { saveOrUpdateDepart, queryTreeList } from "../depart.role.api";
import { useBasicFormSchema, orgCategoryOptions } from "../depart.role.data";

const emit = defineEmits(["success", "register"]);
const props = defineProps({
  rootTreeData: { type: Array, default: () => [] }
});
const prefixCls = inject("prefixCls");
// 当前是否是更新模式
const isUpdate = ref<boolean>(false);
// 当前的弹窗数据
const model = ref<object>({});
const title = computed(() => isUpdate.value ? "编辑" : "新增");

//注册表单
const [registerForm, { resetFields, setFieldsValue, validate, updateSchema }] = useForm({
  schemas: useBasicFormSchema().basicFormSchema,
  showActionButtonGroup: false
});

// 注册弹窗
const [registerModal, { setModalProps, closeModal }] = useModalInner(async data => {
  await resetFields();
  isUpdate.value = unref(data?.isUpdate);
  // 当前是否为添加子级
  let isChild = unref(data?.isChild);
  let categoryOptions = isChild ? orgCategoryOptions.child : orgCategoryOptions.root;

  const treeData = await queryTreeList();
  // 隐藏不需要展示的字段
  updateSchema([
    {
      field: "parentId",
      show: isChild,
      componentProps: { treeData },
    },
    {
      field: "orgCode",
      show: false
    },
    {
      field: "orgCategory",
      componentProps: { options: categoryOptions }
    }
  ]);

  let record = unref(data?.record);
  if (typeof record !== "object") {
    record = {};
  }
  // 赋默认值
  record = Object.assign({
    departOrder: 0,
    orgCategory: categoryOptions[0].value
  }, record);

  await setFieldsValue({ ...record });

});

// 提交事件
async function handleOk() {
  try {
    setModalProps({ confirmLoading: true });
    let values = await validate();
    //提交表单
    await saveOrUpdateDepart(values, isUpdate.value);
    //关闭弹窗
    closeModal();
    //刷新列表
    emit("success");
  } finally {
    setModalProps({ confirmLoading: false });
  }
}
</script>
